<template>
	<div class="left-bar" v-loading="loading">
        <right-duty-card :list="dutyList"></right-duty-card>
        <right-onduty-card :list="ondutyList"></right-onduty-card>
		<left-age-card :list="ageList" v-loading='loading'></left-age-card>
	</div>
	<div class="center-bar" v-loading="loading">
		<center-top :list="datasList"></center-top>
        <template v-if="!loading">
            <center-map :mapList="mapList"></center-map>
        </template>
	</div>
	<div class="right-bar" v-loading="loading">
        <!-- <left-sex-card :list="sexList" v-loading="loading"></left-sex-card> -->
        <right-data-statistical-comparison :mapList="mapList"></right-data-statistical-comparison>
        <left-money-card :list="moneyList" v-loading='loading'></left-money-card>
        <right-video :list="videoList"></right-video>
    </div>
</template>

<script setup>
import { getScreenData, getCityList } from "@/common/apis";
import { onMounted, watch } from "vue";
import { useStore } from 'vuex';
import util from "@/common/utils";
import LeftSexCard from "./components/LeftSexCard.vue";
import LeftAgeCard from "./components/LeftAgeCard.vue";
import LeftMoneyCard from "./components/LeftMoneyCard.vue";

import CenterTop from "./components/CenterTop.vue";
import CenterMap from "./components/CenterMap.vue";

import RightDataStatisticalComparison from "./components/RightDataStatisticalComparison.vue";
import RightDutyCard from "./components/RightDutyCard.vue";
import RightOndutyCard from "./components/RightOndutyCard.vue";
import RightVideo from "./components/RightVideo.vue";

const store = useStore()

const loading = $ref(true)

const sexList = $ref([]);//性别统计
const ageList = $ref([]);//年龄分布
const moneyList = $ref([]);//补贴
const dutyList = $ref([]);//公益岗列表
const ondutyList = $ref([]);//上岗人员
const videoList = $ref([]);//视频
const datasList = $ref([]);//信息统计
const mapList = $ref([]);//地图

watch(
	() => store.state.currentCityCode,
	(newV, oldV) => {
        getData(store.state.currentCityCode)
	}
)


// onMounted(async ()=>{
//     let res = await getScreenData();
//     if(res.success){
//         console.log(res);
//         sexList = res.result['1']
//         datasList = res.result['2']
//         ageList = res.result['3']
//         dutyList = res.result['5']
//         ondutyList = res.result['6']
//         videoList = res.result['7']
//     }else{
//         util.toast(res.message);
//     }
// })
const getData = async (sysOrgCode = 'A01')=>{
    let res = await getScreenData({sysOrgCode: sysOrgCode});
    if(res.success){
        
        let {
            1:sex,
            2:datas,
            3:age,
            4:money,
            5:duty,
            6:onduty,
            7:video,
            9:city,
        } = res.result;
        sexList = sex;
        datasList = datas;
        if(money) moneyList = money;
        ageList = age;
        dutyList = duty;
        ondutyList = onduty;
        if(video) videoList = video;
        if(city) mapList = city;
        loading = false;
    }else{
        util.toast(res.message);
    }
}
getData();

const getCityData = () => {
    getCityList().then(res => {
        store.state.cityData['枣庄市'] = 'A01'
        res.result.map(item => {
            store.state.cityData[item.departName] = item.orgCode
        })
    })
}
getCityData()

</script>

<style scoped lang="scss">
.left-bar {
	position: absolute;
	top: 114px;
	left: 40px;
	width: 453px;
}
.center-bar {
	position: absolute;
	top: 114px;
	left: 512px;
}
.right-bar{
    position:absolute;
    top:114px;
    right:40px;
    width:453px;
}
</style>
